<template>
  <div class="test-page">
    <div class="header">
      <h1>功能测试页面</h1>
      <button @click="clearResults" class="clear-btn">清除结果</button>
    </div>

    <div class="test-sections">
      <!-- 登录测试 -->
      <div class="test-section">
        <h2>登录功能测试</h2>
        <div class="test-form">
          <div class="form-group">
            <label>手机号:</label>
            <input 
              type="text" 
              v-model="testPhoneNumber" 
              placeholder="请输入手机号"
              class="form-input"
            >
          </div>
          <button @click="testLogin" class="test-btn">测试登录</button>
        </div>
        <div v-if="loginResult" :class="['result', loginResult.error ? 'error' : 'success']">
          <h3>登录结果:</h3>
          <pre>{{ JSON.stringify(loginResult, null, 2) }}</pre>
        </div>
      </div>

      <!-- 用户管理测试 -->
      <div class="test-section">
        <h2>用户管理测试</h2>
        <div class="test-buttons">
          <button @click="testGetUsers" class="test-btn">获取用户列表</button>
          <button @click="testAddUser" class="test-btn">添加测试用户</button>
          <button @click="goToUserManagement" class="test-btn">用户管理页面</button>
        </div>
        <div v-if="usersResult" :class="['result', usersResult.error ? 'error' : 'success']">
          <h3>用户列表:</h3>
          <pre>{{ JSON.stringify(usersResult, null, 2) }}</pre>
        </div>
      </div>

      <!-- 数据库连接测试 -->
      <div class="test-section">
        <h2>数据库连接测试</h2>
        <button @click="testDatabaseConnection" class="test-btn">测试数据库连接</button>
        <div v-if="dbResult" :class="['result', dbResult.error ? 'error' : 'success']">
          <h3>数据库连接结果:</h3>
          <pre>{{ JSON.stringify(dbResult, null, 2) }}</pre>
        </div>
      </div>
    </div>

    <!-- 导航链接 -->
    <div class="navigation">
      <h2>页面导航</h2>
      <div class="nav-links">
        <router-link to="/login" class="nav-link">登录页面</router-link>
        <router-link to="/user-management" class="nav-link">用户管理</router-link>
        <router-link to="/" class="nav-link">首页</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

interface ApiResponse {
  success?: boolean
  message?: string
  data?: any
  error?: boolean
  users?: any[]
  total?: number
  userCount?: number
}

export default defineComponent({
  name: 'TestPage',
  setup() {
    const router = useRouter()
    const testPhoneNumber = ref('15999999998')
    const loginResult = ref<ApiResponse | null>(null)
    const usersResult = ref<ApiResponse | null>(null)
    const dbResult = ref<ApiResponse | null>(null)

    // 测试登录
    const testLogin = async () => {
      loginResult.value = null
      try {
        const response = await axios.post('http://localhost:3000/users/login', {
          phoneNumber: testPhoneNumber.value
        })
        loginResult.value = response.data
      } catch (error: any) {
        console.error('登录测试失败:', error)
        loginResult.value = {
          error: true,
          message: error.response?.data?.message || error.message || '网络错误'
        }
      }
    }

    // 测试获取用户列表
    const testGetUsers = async () => {
      usersResult.value = null
      try {
        const response = await axios.get('http://localhost:3000/users/list')
        usersResult.value = response.data
      } catch (error: any) {
        console.error('获取用户列表失败:', error)
        usersResult.value = {
          error: true,
          message: error.response?.data?.message || error.message || '网络错误'
        }
      }
    }

    // 测试添加用户
    const testAddUser = async () => {
      usersResult.value = null
      try {
        const testPhone = `159${Math.floor(Math.random() * 100000000).toString().padStart(8, '0')}`
        const response = await axios.post('http://localhost:3000/users/login', {
          phoneNumber: testPhone
        })
        usersResult.value = {
          success: true,
          message: '测试用户添加成功',
          data: response.data
        }
      } catch (error: any) {
        console.error('添加用户失败:', error)
        usersResult.value = {
          error: true,
          message: error.response?.data?.message || error.message || '网络错误'
        }
      }
    }

    // 测试数据库连接
    const testDatabaseConnection = async () => {
      dbResult.value = null
      try {
        const response = await axios.get('http://localhost:3000/users/list')
        dbResult.value = {
          success: true,
          message: '数据库连接正常',
          userCount: response.data.total
        }
      } catch (error: any) {
        console.error('数据库连接测试失败:', error)
        dbResult.value = {
          error: true,
          message: '数据库连接失败: ' + (error.response?.data?.message || error.message || '网络错误')
        }
      }
    }

    // 跳转到用户管理页面
    const goToUserManagement = () => {
      router.push('/user-management')
    }

    // 验证手机号格式
    const isValidPhoneNumber = (phone: string) => {
      const phoneRegex = /^1[3-9]\d{9}$/
      return phoneRegex.test(phone)
    }

    // 测试登录（带验证）
    const testLoginWithValidation = async () => {
      if (!isValidPhoneNumber(testPhoneNumber.value)) {
        alert('请输入正确的手机号格式')
        return
      }
      await testLogin()
    }

    // 清除所有结果
    const clearResults = () => {
      loginResult.value = null
      usersResult.value = null
      dbResult.value = null
    }

    return {
      testPhoneNumber,
      loginResult,
      usersResult,
      dbResult,
      testLogin: testLoginWithValidation,
      testGetUsers,
      testAddUser,
      testDatabaseConnection,
      goToUserManagement,
      clearResults
    }
  }
})
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.header h1 {
  color: #333;
  margin: 0;
}

.clear-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.clear-btn:hover {
  background: #5a6268;
}

.test-sections {
  display: grid;
  gap: 30px;
  margin-bottom: 40px;
}

.test-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-section h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #007AFF;
  padding-bottom: 10px;
}

.test-form {
  display: flex;
  gap: 15px;
  align-items: end;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: 500;
  color: #333;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 200px;
}

.form-input:focus {
  outline: none;
  border-color: #007AFF;
}

.test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.test-btn {
  background: #007AFF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.test-btn:hover {
  background: #0056CC;
}

.result {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
}

.result h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result h3::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007AFF;
}

.result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  border-left: 3px solid #007AFF;
}

.result.error pre {
  border-left-color: #dc3545;
}

.result.success pre {
  border-left-color: #28a745;
}

.navigation {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navigation h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
}

.nav-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.nav-link {
  background: #007AFF;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background: #0056CC;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .test-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-input {
    min-width: auto;
  }
  
  .test-buttons {
    flex-direction: column;
  }
  
  .nav-links {
    flex-direction: column;
  }
}
</style> 